<!--
 * @Description: 项目策划考核比例设置
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-09-06 10:04:30
 * @LastEditTime: 2021-09-16 21:26:01
 * @FilePath: \cscec-pms-admin\src\views\project\planningAssessment\index.vue
-->
<template>
  <base-breadcrumb class="flexMemberInfo-container">
    <a-card>
      <!-- <title-name :title="$route.meta.title" /> -->
      <list-table
        ref="table"
        :columns="columns"
        :request="loadData"
        :is-show-count-bar="false"
        :show-page="false"
      >
        <template
          slot="operation"
          slot-scope="text,record"
        >
          <a
            v-btnPermission="[{code:'seex_pm_037_edi_02',ident:'prma_seex'},{code:'buco_pm_037_edi_02',ident:'prma_buco'}]"
            @click="handleEdit(record)"
          >编辑</a>
        </template>
      </list-table>
      <p class="planning-assessment-warning">
        注：比例变更后，项目策划考核历史数据不发生变化，从变更比例后提交的月度、季度汇总使用新比例计算
      </p>
    </a-card>
    <!-- 编辑模态框 -->
    <base-modal
      title="编辑项目策划考核比例"
      :closable="true"
      :visible="visible"
      destroy-on-close
      width="900px"
      ok-text="提交"
      :confirm-loading="confirmLoading"
      @cancel="handleClose"
      @ok="handleOk"
    >
      <custom-form
        ref="form"
        :is-validate="true"
        :edit-model="''"
        :rules="rules"
        :form="form"
        :form-list="formOption"
      >
        <template slot="applicableSituationName">
          <span class="applicable-situation-name">{{ form.applicableSituationName }}</span>
        </template>
      </custom-form>
    </base-modal>
    <!-- 编辑模态框 -->
  </base-breadcrumb>
</template>
<script>
import BaseModal from '@/components/BaseModal'
import planningAssessment from '@/api/project/planningAssessment'
import cloneDeep from 'lodash.clonedeep'
export default {
  name: 'PlanningAssessment',
  components: {
    BaseModal
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '适用情况',
          dataIndex: 'applicableSituationName'
        },
        {
          title: '考核比例',
          customRender: (text, record) => {
            const { proportionPd, proportionBc, proportionCo } = record
            let list = []
            proportionPd === -1 ? '' : list.push(`项目部占比${proportionPd}%`)
            proportionBc === -1 ? '' : list.push(`分公司占比${proportionBc}%`)
            proportionCo === -1 ? '' : list.push(`公司占比${proportionCo}%`)
            return list.join('，')
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 170,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 表格加载
      loadData: async () => {
        const res = await planningAssessment.list({})
        return {
          code: 200,
          data: res.data,
          ...res
        }
      },
      // 编辑模态框显示隐藏
      visible: false,
      // 编辑表单
      form: {
        applicableSituationName: '',
        proportionPd: 0,
        proportionBc: 0,
        proportionCo: 0
      },
      //模态框提交
      confirmLoading: false
    }
  },
  computed: {
    // 表单选项
    formOption() {
      const { proportionPd, proportionBc, proportionCo } = this.form
      const list = [
        {
          label: '适用情况',
          keyName: 'applicableSituationName',
          slot: true,
          span: 24
        }
      ]
      if (proportionPd !== -1) {
        list.push({
          label: '项目部占比(%)',
          keyName: 'proportionPd',
          type: 'BaseInputNumber',
          precision: 2,
          attrs: {
            min: 0,
            max: 100
          },
          rules: [{ required: true, message: '请输入', trigger: 'change' }],
          span: 24
        })
      }
      if (proportionBc !== -1) {
        list.push({
          label: '分公司占比(%)',
          keyName: 'proportionBc',
          type: 'BaseInputNumber',
          precision: 2,
          attrs: {
            min: 0,
            max: 100
          },
          rules: [{ required: true, message: '请输入', trigger: 'change' }],
          span: 24
        })
      }
      if (proportionCo !== -1) {
        list.push({
          label: '公司占比(%)',
          keyName: 'proportionCo',
          type: 'BaseInputNumber',
          precision: 2,
          attrs: {
            min: 0,
            max: 100
          },
          rules: [{ required: true, message: '请输入', trigger: 'change' }],
          span: 24
        })
      }
      return list
    },
    // 校验
    rules() {
      const obj = {}
      this.formOption.map((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  methods: {
    /**
     * @description: 编辑
     * @param {object} record 行数据
     * @return {void}
     */
    handleEdit(record) {
      this.visible = true
      this.form = cloneDeep(record)
    },
    /**
     * @description: 编辑模态框关闭
     * @param {void}
     * @return {void}
     */
    handleClose() {
      this.visible = false
      this.$refs.table.getData(null, true)
    },
    /**
     * @description: 提交
     * @param {void}
     * @return {void}
     */
    handleOk() {
      const { proportionPd, proportionBc, proportionCo } = this.form
      const num =
        (proportionPd < 0 ? 0 : proportionPd) +
        (proportionBc < 0 ? 0 : proportionBc) +
        (proportionCo < 0 ? 0 : proportionCo)
      if (num === 100) {
        const vm = this
        this.$confirm({
          title: '提交确认',
          content: '确定提交项目策划考核比例？',
          onOk() {
            vm.confirmLoading = true
            planningAssessment
              .edit(vm.form)
              .then(({ code, message }) => {
                if (code === 200) {
                  vm.$message.success('操作成功')
                  vm.handleClose()
                } else {
                  vm.$message.warning(message)
                }
              })
              .finally(() => {
                vm.confirmLoading = false
              })
          }
        })
      } else {
        this.$message.warning('不同级别单位所占比例之和必须为100')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.planning-assessment-warning {
  color: red;
  margin-top: 20px;
  margin-bottom: 0;
}
.applicable-situation-name {
  position: relative;
  top: -3px;
}
</style>
